<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前时间</title>
</head>
<body>
    <div id="app">
        {{date}}<br>
        <!--管道符|对数据进行过滤-->
        {{date | formatDate}}
        {{number/10}}<br>
        {{isOK?'确定':'取消'}}<br>
        {{text.split(',').reverse().join(',')}}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var padDate=function (value){
            return value < 10 ? "0" + value : value;
        };

        var app = new Vue({
            el: '#app',
            data: {
                date: new Date(),
                number: 100,
                isOK: false,
                text: '123,456'
            },

            filters:{
              formatDate: function (value){
                  var date = new Date(value);
                  var year = date.getFullYear();
                  var month = padDate(date.getMonth()+1);
                  var day = padDate(date.getDate());
                  var hours = padDate(date.getHours());
                  var minutes = padDate(date.getMinutes());
                  var seconds = padDate(date.getSeconds());
                  return year + "-" + month + "-" + day + ' ' + hours + ":"+minutes+":"+seconds;
              }
            },
            mounted: function () {
                var _this = this;
                //每隔一秒钟更新一下date数据
                this.timer = setInterval(function () {
                    _this.date = new Date();
                },1000)
            },
            beforeDestroy: function (){
                if (this.timer){
                    clearInterval(this.timer);//在Vue实例销毁之前，清除我们的定时器
                }
            }
        })
    </script>
</body>
</html>
